<template>
  <div id="xbox">
    <ul class="rightBox" v-show="rightShow">
      <li class="icon1">
        <div></div>
        <p>个人中心</p>
      </li>
      <li class="icon2">
        <div></div>
        <p>热线</p>
      </li>
      <li class="icon3">
        <div></div>
        <p>优惠券</p>
      </li>
      <li class="icon4">
        <div></div>
        <p>客服</p>
      </li>
      <li class="icon5">
        <div></div>
        <p>APP</p>
      </li>
      <li class="icon6">
        <div></div>
        <p>注册好礼</p>
      </li>
      <li class="icon7" @click="toGo(0)">
        <div></div>
        <p>返回顶部</p>
      </li>
    </ul>

    <div class="topBox" v-show="topShow">
      <img
        src="http://1.117.75.96:8080/goods/UI/delete.png"
        alt=""
        class="del"
        @click="topShow = mycli = false"
      />
      <img src="http://1.117.75.96:8080/goods/header.png" alt="" class="mian" />
    </div>
  </div>
</template>

<script>
import $ from 'jquery'
export default {
  data() {
    return {
      topShow: false,
      rightShow: false,
      mycli: true
    }
  },
  methods: {
    toGo(y) {
      $('body,html').animate({ scrollTop: y }, 500)
    },
    autoScroll() {
      $(document).on('scroll', () => {
        if (document.documentElement.scrollTop < 200) {
          this.topShow = false
          this.rightShow = false
          this.mycli = true
        }
        if (document.documentElement.scrollTop >= 200 && this.mycli) {
          // this.topShow = true
          this.rightShow = true
        }
      })
    }
  },
  mounted() {
    this.autoScroll()
  }
}
</script>

<style lang="less" scoped>
.rightBox {
  position: fixed;
  top: 50%;
  right: 10px;
  width: 78px;
  border: 1px solid rgb(242, 242, 242);
  background: rgb(255, 255, 255);
  transform: translateY(-55%);
  z-index: 20;
  // display: none;

  li {
    display: block;
    padding: 1px 1px 0;
    height: 90px;
    padding: 1px 1px 0;
    border-bottom: 1px solid #f2f2f2;
    cursor: pointer;
    position: relative;
    user-select: none;

    div {
      width: 40px;
      height: 40px;
      margin: 10px auto 10px;
      background-size: 100% 100%;
    }

    p {
      font-size: 14px;
      text-align: center;
      color: #808080;
    }
  }

  .icon1 div {
    background: url(http://1.117.75.96:8080/goods/UI/f_icon_no1.png);
  }

  .icon2 div {
    background: url(http://1.117.75.96:8080/goods/UI/f_icon_no2.png);
  }

  .icon3 div {
    background: url(http://1.117.75.96:8080/goods/UI/f_icon_no3.png);
  }

  .icon4 div {
    background: url(http://1.117.75.96:8080/goods/UI/f_icon_no4.png);
  }

  .icon5 div {
    background: url(http://1.117.75.96:8080/goods/UI/f_icon_no5.png);
  }

  .icon6 div {
    background: url(http://1.117.75.96:8080/goods/UI/f_icon_no6.png);
  }

  .icon7 div {
    background: url(http://1.117.75.96:8080/goods/UI/f_icon_no7.png);
  }

  .icon1:hover {
    div {
      background: url(http://1.117.75.96:8080/goods/UI/f_icon1.png);
    }

    p {
      color: #1e7cff;
    }
  }

  .icon2:hover {
    div {
      background: url(http://1.117.75.96:8080/goods/UI/f_icon2.png);
    }

    p {
      color: #1e7cff;
    }
  }

  .icon3:hover {
    div {
      background: url(http://1.117.75.96:8080/goods/UI/f_icon3.png);
    }

    p {
      color: #1e7cff;
    }
  }

  .icon4:hover {
    div {
      background: url(http://1.117.75.96:8080/goods/UI/f_icon4.png);
    }

    p {
      color: #1e7cff;
    }
  }

  .icon5:hover {
    div {
      background: url(http://1.117.75.96:8080/goods/UI/f_icon5.png);
    }

    p {
      color: #1e7cff;
    }
  }

  .icon6:hover {
    div {
      background: url(http://1.117.75.96:8080/goods/UI/f_icon6.png);
    }

    p {
      color: #1e7cff;
    }
  }

  .icon7:hover {
    div {
      background: url(http://1.117.75.96:8080/goods/UI/f_icon7.png);
    }

    p {
      color: #1e7cff;
    }
  }
}

.topBox {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1920px;
  height: 120px;
  z-index: 20;
  // display: none;

  .mian {
    display: block;
    width: 100%;
    height: 100%;
  }

  .del {
    width: 25px;
    height: 25px;
    position: absolute;
    top: 10px;
    right: 12px;
    cursor: pointer;
    z-index: 99;
  }
}
</style>
